<template>

  <view class="content" v-if="info">
    <u-navbar :is-back="false" title="领货单详情"
      title-size="30"
      :background="{background:'#2B88FE' }"
      title-color="#fff">
      <view class="head_icon">
        <u-icon @click="$api.handleBackTo"
          name="arrow-left" color="#fff"
          size="36">
        </u-icon>
        <u-icon @click="$api.handleHomeTo"
          name="home" color="#fff" size="36">
        </u-icon>
      </view>
    </u-navbar>
	
	<view class="info  x-row">
	  <view class="x-col">
	    <view
	      class="itxt u-skeleton-rect">
	      <view class="s1">
	        领货人</view>
	      {{info.fUpdateTime}}
	    </view>
	 <view
	   class="itxt u-skeleton-rect">
	   <view class="s1">
	     车牌号</view>
	   {{info.fCarNo}}
	 </view>

	    <view
	      class="itxt u-skeleton-rect">
	      <view class="s1">
	        审核状态</view>
	  	 {{$api.getPassStatus(info.fStatus)}}
	    </view>
	   
	
	  </view>
			 </view>
	
	
	
    <appProduct v-for="(v,i) in info.ProList"
      :key="i" :li="v">
    </appProduct>
    <u-empty text="暂无数据" mode="list"
      v-if=" !info.ProList.length">
    </u-empty>
    <div class="app-footer">
      <u-button v-if="info.fStatus==1"
        @click="handleCancel">
        取消申请
      </u-button>
      <u-button type="primary"
        v-if="info.fStatus==1"
        @click="handleSave">
        确认{{str}}
      </u-button>
    </div>
  </view>
</template>

<script>
import appProduct from '@/components/app-product'
export default {
  components: {
    appProduct
  },
  data() {
    return {
      str: '',
      state: 1,
      id: '',
      info: null,
      user: {},
      img: this.urlimg,
      loading: true
    }
  },
  onLoad(e) {
    let state = e.state
    this.state = state
    if (state == 2) {
      uni.setNavigationBarTitle({
        title: '领货单详情'
      })
      this.str = '出货'
    } else if (state == 1) {
      uni.setNavigationBarTitle({
        title: '还库单详情'
      })
      this.str = '还库'
    } else {
      uni.setNavigationBarTitle({
        title: '退换货详情'
      })
      this.str = '退换'
    }
    this.id = e.id
    this.$axios('api/ProInAndOut/GetDetailAndListById', 'post', { value: e.id }).then(res => {
      res.Value.ProList.forEach(x => {
        x.id = x.fProId
        x.gname = x.fProName
        x.details = [
          {
            label: '领取数量',
            value: x.fCount
          },
		  {
		    label: '单位',
		    value: x.fUnit
		  },
          {
            label: '到期时间',
            value: x.fOverTime
          }
        ]
      })
      this.info = res.Value
    })
  },
  methods: {
    handleSave() {
      let str = this.str
      this.$api.modelMessage(`${str}商品`, `确认${str}吗？`).then(() => {
        let info = { id: this.id, DoType: 10 }
        this.$axios('api/ProInAndOut/ConfirmDoDetail', 'post', { value: info }).then(res => {
          if (!res.Success) {
            uni.showToast({
              title: '提交失败：' + res.Message,
              icon: 'none',
              duration: 2000
            })
            return false
          }

          this.$api.handleBack(`${str}成功`)
        })
      })
    },
    handleCancel() {
      let str = this.str
      this.$api.modelMessage(`取消${str}商品`, `确认要取消${str}吗？`).then(() => {
        let info = { id: this.id, DoType: 1 }
        this.$axios('api/ProInAndOut/ConfirmDoDetail', 'post', { value: info }).then(() => {
          this.$api.handleBack(`取消${str}成功`)
        })
      })
    },
    beforeImg(url) {
      uni.previewImage({
        current: url,
        urls: [url]
      })
    }
  }
}
</script>

<style scoped lang="scss">
  
 .info {
   padding: 32rpx 32rpx 16rpx 32rpx;
   box-sizing: border-box;
 
   .itxt {
     padding-bottom: 16rpx;
     font-size: 28rpx;
     font-weight: 400;
     color: #34404a;
     line-height: 40rpx;
 
     .s1 {
       width: 160rpx;
       color: #979797;
       font-size: 32rpx;
       display: inline-block;
     }
 
     .yhj {
       width: 96rpx;
       height: 40rpx;
       text-align: center;
       border-radius: 20rpx;
       display: inline-block;
       line-height: 40rpx;
       border: 2rpx solid #2b88fe;
       font-size: 28rpx;
       color: #2b88fe;
       margin-left: 16rpx;
     }
 
     .mingxi {
       font-weight: 400;
       color: #2b88fe;
       line-height: 42rpx;
 
       .iconfont {
         font-size: 25rpx;
       }
 
       display: inline-block;
       margin-left: 16rpx;
     }
   }
 }

.topheader {
  padding: 0 32upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.titel {
  color: #34404a;
  font-size: 32upx;
  padding: 32upx 0;
}
.imglist {
  padding-bottom: 30upx;
  overflow: hidden;
}
.imglist image {
  width: 160upx;
  height: 160upx;
  float: left;
  margin-right: 20upx;
}
.viebox {
  color: #34404a;
  font-size: 32upx;
  padding: 0 32upx;
  line-height: 110upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
</style>
